<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="lz">
    <script src="jQuery/jquery-3.1.1.js"></script>
    <title></title>
    <style>
        .box {
            width: 500px;
            margin: 0 auto;
        }
        
        .content {
            line-height: 30px;
        }
        
        .right {
            float: right;
        }
        
        strong {
            font-size: 36px;
            color: orange;
        }
        
        .input .text {
            width: 100%;
            height: 120px;
            resize: none;
            border: 1px solid #aaa;
            /*内阴影*/
            box-shadow: 0 0 5px #ccc inset;
            padding: 10px;
            font-size: 16px;
        }
        
        .text:focus {
            border-color: #f93;
            outline: none;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content">
            <span>有什么新鲜事想告诉大家?</span>
            <span class="right">可以发布超过<strong>140</strong>字的微博啦</span>
        </div>
        <div class="input">
            <textarea class="text"></textarea>
        </div>
    </div>
</body>

</html>
<script>
    // 输入内容时计算字数
    $('.input .text').keyup(num)

    // 获取输入焦点时计算字数
    $('input .text').focus(num);


    // 计算字数的方法
    function num() {
        // 获取输入字符的长度
        var length = $(this).val().length;


        // 获取输入文字的长度（一个中文字符是一个文字，两个英文字符是一个文字）
        var currentLength = 0;
        if (length > 0) {
            for (var i = 0; i < length; i++) {
                // charCodeAt 转化为uncode编码
                if ($(this).val().charCodeAt(i) > 255) {
                    // 中文字符
                    currentLength++;
                } else {
                    // 英文字符
                    currentLength += 0.5;
                }
            }
            console.log(currentLength)

        }

        var result = Math.ceil(currentLength);

        if (result < 140 && result>0) {
            $('.right').html('已输入<strong style="color:gray;">' + result + '</strong>字')
        } else if(result<=0){
            $('.right').html('可以发布超过<strong>140</strong>字的微博啦')
        } else {
            $('.right').html('已输入<strong style="color:orange;">' + result + '</strong>字')
        }

    }

</script>